<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 动态class 3种 -->
			<!-- v-bind:class="{active:isActive,green:isGreen}" -->
			<!-- v-bind:class="['active','green']" -->
			<div 
			class="text"
			v-bind:class="[isActive?'active':'',isGreen?'green':'']"
			style="width: 200px;height: 200px;text-align: center;line-height: 200px;">
				hi vue
			</div>
			{{msg}}
			
			<!-- 动态style -->
			<div
				:style="{color:color,fontSize:size,background:isRed?'#ff0000':''}">
				hi vue
				</div>
			
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					msg:2,
					isActive:true,
					isGreen:true,
					
					color:'#ffffff',
					size:'50px',
					isRed:true
				}
				
				
			})
			
		</script>
		
		<style type="text/css">
			.text{font-size: 50px;}
			.green{color: seagreen;}
			.active{background: #FF0000;}
		</style>
	</body>
</html>
